<!doctype html>
<html>
	<head>
		<title>Stock Options Analysis</title>
		<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
		<script src="js/jquery.js"></script>
		<script src="js/jquery.mobile-1.4.4.js"></script>
		<script src="js/jquery.mask.js"></script>
		<script src="js/json2.js"></script>
		<script src="js/canvasjs.js"></script>
		<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.4.css">
		<style>
			body, .ui-table-columntoggle-btn.ui-mini { font-size: 11px; }
			.ui-table-columntoggle-btn { display: none; }
			.OperacaoPositiva {
				color: green;
			}
			.OperacaoNegativa {
				color: red;
			}
			.selecionado {
				border-style: solid;
				border-color: blue;
			}
			.spinner {
				position: fixed;
				top: 50%;
				left: 50%;
				margin-left: -50px; /* half width of the spinner gif */
				margin-top: -50px; /* half height of the spinner gif */
				text-align:center;
				z-index:1234;
				overflow: auto;
				width: 100px; /* width of the spinner gif */
				height: 102px; /*hight of the spinner gif +2px to fix IE8 issue */
			}
		</style>
		<script>
			var WINDOW_LOCATION='';
			var operacoesASalvar = [];
			var TAXA_JUROS = 11.25;
			var TIME_LOADING_OPEN = 1000;
			var TIME_LOADING_CLOSE = 100;
			
			$(document).ready(function(){
			  $('.decimal').mask('0000.00', {reverse: true});
			  $('.decimal4').mask('0.0000', {reverse: true});
			});
			function openLoading() {
				$.mobile.loading( "show", {
			            text: "Carregando...",
						textVisible: true,
						theme: "z",
						html: ""
			    });
			}
			
			function closeLoading() {
				$.mobile.loading( "hide" );
			}
			
			function ocultarContainer() {
				//document.getElementById('chartContainer').style.display = 'none';
				var myNode = document.getElementById("chartContainer");
				while (myNode.firstChild) {
					myNode.removeChild(myNode.firstChild);
				}
				document.getElementById('voltar').style.display = 'none';
				document.getElementById('camposPreenchimento').style.display = 'block';
			}
			function abrirContainer() {
				//document.getElementById('chartContainer').style.display = 'block';
				document.getElementById('voltar').style.display = 'block';
				document.getElementById('camposPreenchimento').style.display = 'none';
			}
			
			function getCotacao() {
				document.getElementById('lblCotacaoAtivo').innerHTML = "";
				openLoading();
				setTimeout(function() {
					var codigoAtivo = document.getElementById('codigoAtivo').value;
					if (!codigoAtivo) {
						alert('É necessário preencher o código do ativo');
						// fecha o loading
						setTimeout(closeLoading, TIME_LOADING_CLOSE);
						return;
					}
					var cotacao = window.JSInterface.getCotacao(codigoAtivo);
					if (codigoAtivo.toUpperCase() == 'REGID') {
					    document.getElementById('regID').innerHTML = cotacao;
					    document.getElementById('regID').style.display = "block";
					} else {
					    document.getElementById('lblCotacaoAtivo').innerHTML = cotacao;
					    document.getElementById('regID').style.display = "none";
					}
					// fecha o loading
					setTimeout(closeLoading, TIME_LOADING_CLOSE);
				}, TIME_LOADING_OPEN);
			}
			
			function getBS(qtdDias) {
				var ehCall = isCall('tipoOpcao');
				var pe = parseFloat(document.getElementById("pe").value);
				var pia = parseFloat(document.getElementById("pia").value);
				var pfa = parseFloat(document.getElementById("pfa").value);
				var interv = parseFloat(document.getElementById("interv").value);
				var volat = parseFloat(document.getElementById("volat").value);
				var txjuros = parseFloat(document.getElementById("txjuros").value);
				//var dados = JSON.parse(window.JSInterface.resultado(21.0, 20.0, 25.0, 0.5, qtdDias, 0.27, 0.09));
				var dados = JSON.parse(window.JSInterface.resultado(ehCall, pe, pia, pfa, interv, qtdDias, volat, txjuros));
				//console.log(JSON.stringify(dados));
				return dados;
			}
			
			function isCall(elementName) {
				var opcoes = document.getElementsByName(elementName);
				var indice = 0;
				for (var i = 0; i < opcoes.length; i++) {
					if (opcoes[i].checked) {
						indice = i;
						break;
					}
				}
				return (opcoes[indice].value == "1") ? true : false;
			}
			
			function calcularVolatPrecoOp(calcularPrecoOp) {
				openLoading();
				setTimeout(function() {
					var ehCall = isCall('tipoOpcaoBS');
					var pa = parseFloat(document.getElementById("paBS").value);
					if (!pa) {
						alert('É necessário preencher o preço da ação');
						setTimeout(closeLoading, TIME_LOADING_CLOSE);
						return;
					}
					var pe = parseFloat(document.getElementById("peBS").value);
					if (!pe) {
						alert('É necessário preencher o preço de exercício da opção');
						setTimeout(closeLoading, TIME_LOADING_CLOSE);
						return;
					}
					var qtdDiasVenc = Number(document.getElementById("qtdDiasVencBS").value);
					if (!qtdDiasVenc) {
						alert('É necessário preencher a quantidade de dias para vencimento da opção');
						setTimeout(closeLoading, TIME_LOADING_CLOSE);
						return;
					}
					var txjuros = parseFloat(document.getElementById("txjurosBS").value);
					if (!txjuros) {
						alert('É necessário preencher a taxa de juros');
						setTimeout(closeLoading, TIME_LOADING_CLOSE);
						return;
					}
					var poObj = document.getElementById("poBS");
					var volatObj = document.getElementById("volatBS");
					if (calcularPrecoOp) {
						if (!volatObj.value) {
							alert('É necessário preencher a volatilidade utilizada');
							// fecha o loading
							setTimeout(closeLoading, TIME_LOADING_CLOSE);
							return;
						}
						// recupera o preço da opção
						var po = window.JSInterface.getPrecoOpcao(ehCall, pa, pe, qtdDiasVenc, parseFloat(volatObj.value), txjuros);
						poObj.value = po;
					} else {
						if (!poObj.value) {
							alert('É necessário preencher o preço da opção');
							// fecha o loading
							setTimeout(closeLoading, TIME_LOADING_CLOSE);
							return;
						}
						// recupera a volatilidade que está sendo praticada
						var volat = window.JSInterface.getVolatilidade(ehCall, pa, pe, parseFloat(poObj.value), qtdDiasVenc, txjuros);
						volatObj.value = volat;
					}
					// fecha o loading
					setTimeout(closeLoading, TIME_LOADING_CLOSE);
				}, TIME_LOADING_OPEN);
			}
			 
			window.onload = function() {
				WINDOW_LOCATION=window.location.href;
				ocultarContainer();
			}
			mostrarGrafico = function() {
				
				var pe = parseFloat(document.getElementById("pe").value);
				var pia = parseFloat(document.getElementById("pia").value);
				var pfa = parseFloat(document.getElementById("pfa").value);
				var interv = parseFloat(document.getElementById("interv").value);
				var volat = parseFloat(document.getElementById("volat").value);
				var txjuros = parseFloat(document.getElementById("txjuros").value);
				if (!pe || !pia || !pfa || !interv || !volat || !txjuros) {
					alert('É necessário preencher todos os campos');
					return;
				}
				//var ctx = document.getElementById("canvas").getContext("2d");
				//window.myLine = new Chart(ctx).Line(lineChartData, {
				//	responsive: true
				//});
				//alert('entrou');
				var chart = new CanvasJS.Chart("chartContainer",
				{
				  title:{
					text: "Stock Options Analysis"  
				  },
				  data: [
					  {        
						type: "line",
						showInLegend: true,
						legendText: '40 dias',
						dataPoints: getBS(40)
					  },
					  {        
						type: "line",
						showInLegend: true,
						legendText: '35 dias',
						dataPoints: getBS(35)
					  },
					  {        
						type: "line",
						showInLegend: true,
						legendText: '30 dias',
						dataPoints: getBS(30)
					  },
					  {        
						type: "line",
						showInLegend: true,
						legendText: '25 dias',
						dataPoints: getBS(25)
					  },
					  {        
						type: "line",
						showInLegend: true,
						legendText: '20 dias',
						dataPoints: getBS(20)
					  },
					  {        
						type: "line",
						showInLegend: true,
						legendText: '15 dias',
						dataPoints: getBS(15)
					  },
					  {        
						type: "line",
						showInLegend: true,
						legendText: '10 dias',
						dataPoints: getBS(10)
					  },
					  {        
						type: "line",
						showInLegend: true,
						legendText: '3 dias',
						dataPoints: getBS(3)
					  }
				  ]
				});

				chart.render();
				
				abrirContainer();
			}
			
			function getOperacoesAtivoBD() {
				var operacoes = [];
				operacoes.push({tipo: {codigo: 1, descricao: "C"}, codigoAtivo: "PETR4", dataVencimento: "", quantidade: 100, precoOperacao: 20.9, precoAtual: 21.57});
				operacoes.push({tipo: {codigo: 1, descricao: "C"}, codigoAtivo: "PETRJ49", dataVencimento: "20/10/2014", quantidade: 100, precoOperacao: 1.01, precoAtual: 3.25});
				operacoes.push({tipo: {codigo: 1, descricao: "C"}, codigoAtivo: "PETRK51", dataVencimento: "20/11/2014", quantidade: 100, precoOperacao: 3.10, precoAtual: 1.52});
				montarOperacoesAtivoTable(operacoes);
				//getTableOperacoesAtivoValues();
				
			}
			
			function getTableOperacoesAtivoValues() {
				var table = document.getElementById('tbAtivo');
				for (var i = 1; i < table.rows.length; i++) {
					var operacao = {};
					operacao.tipo = {};
					operacao.tipo.descricao = table.rows[i].cells[0].innerHTML;
					operacao.codigoAtivo = table.rows[i].cells[1].innerHTML;
					operacao.dataVencimento = table.rows[i].cells[2].innerHTML;
					operacao.quantidade = table.rows[i].cells[3].innerHTML;
					operacao.precoOperacao = table.rows[i].cells[4].innerHTML;
					//alert(JSON.stringify(operacao));
					operacoesASalvar.push(operacao);
				}
				alert(JSON.stringify(operacoesASalvar));
			}
			
			function montarOperacoesAtivoTable(operacoes) {
				for (var i = 0; i < operacoes.length; i++) {
					var operacao = operacoes[i];
					addOperacoesAtivoTableRow('tbAtivo', operacao.tipo.descricao, operacao.codigoAtivo, operacao.dataVencimento, 
							operacao.quantidade, operacao.precoOperacao, operacao.precoAtual);
				}
			}
			
			// quando o documento estiver pronto
			$(document).ready(function () {
				// recupera as operacoes salvas na base de dados
				getOperacoesAtivoBD();
				$(".addRowAtivo").click(function () {
					addOperacoesAtivoTableRow('tbAtivo', 'C', 'PETRJ50', '', 100, 20.5, 19.57);
					getTableOperacoesAtivoValues();
				});
				$("#tbAtivo").on('click', '.rmRowAtivo', function() {
					$(this).parent().parent().remove();
				});
			});
			
			function addOperacoesAtivoTableRow(tableId, operacao, ativo, dataVencimento, quantidade, precoOperacao, precoAtual) {
				var saldoAtual = precoAtual - precoOperacao;
				saldoAtual = saldoAtual.toFixed(2);
				var classOperName = (saldoAtual > 0) ? 'OperacaoPositiva' : 'OperacaoNegativa';
				$("#" + tableId).append('<tr>' +
					'<td>' + operacao + '</td>' + 
					'<td>' + ativo + '</td>' + 
					'<td>' + dataVencimento + '</td>' + 
					'<td>' + quantidade + '</td>' +
					'<td>' + precoOperacao + '</td>' + 
					'<td>' + precoAtual + '</td>' +
					'<td class=' + classOperName + '>' + saldoAtual + '</td>' +
					'<td><img src="img/lixeira.jpg" style="width:20px;height:20px" class="rmRowAtivo" /></td>' +
					'</tr>');
				//$("#"+ tableId).table("refresh");
			}
			
		</script>
	</head>
	<body>
	
	<div data-role="page" id="pgCarteira">
		<div data-role="header" style="overflow:hidden;">
			<div data-role="navbar">
				<ul>
					<li><a href="#pgCarteira" class="ui-btn-active ui-state-persist" data-transition="slidefade">COTAÇÃO</a></li>
					<li><a href="#pgBS" data-transition="slidefade">B&S</a></li>
					<li><a href="#pgSimulacao" data-transition="slidefade">SIMULAÇÃO</a></li>
				</ul>
			</div>
		</div>

		<div data-role="content">
			<!--
			<a href="javascript:void(0);" class="addRowAtivo" >Adicionar</a>
			<table data-role="table" id="tbAtivo" data-mode="columntoggle" class="ui-responsive table-stroke">
			 <thead>
			   <tr>
				 <th>Op.</th>
				 <th>Ativo</th>
				 <th>Data Venc.</th>
				 <th>Qtd.</th>
				 <th><abbr title="Preço Oper.">Preço Oper.</abbr></th>
				 <th><abbr title="Preço Atual">Preço Atual</abbr></th>
				 <th>Saldo</th>
				 <th></th>
			   </tr>
			 </thead>
			 <tbody>
			 </tbody>
		   </table>
		   <br />
		   <input type="button" value="Adicionar Operação" onclick="window.location=WINDOW_LOCATION+'#pgAdicionarOperacao';" /> 
		   <input type="button" value="Salvar" onclick="" /> 
		   -->
		   <table>
				<tr>
					<td align="right">Ativo:</td>
					<td><input id="codigoAtivo" style="text-transform: uppercase" value="PETR4" type="text" /></td>
					<td><input class="show-page-loading-msg" data-textonly="false" data-textvisible="true" data-msgtext="" data-inline="true" value="Buscar" type="button" onclick="getCotacao();" /></td>
				</tr>
				<tr>
					<td>Preço do Ativo:</td>
					<td><label id="lblCotacaoAtivo"></label></td>
					<td>&nbsp;</td>
				</tr>
			</table>
            <textarea id="regID" rows="10" cols="30" style="display:none" ></textarea>

			
		</div>
		

	</div>
	
	<div data-role="page" id="pgAdicionarOperacao">
		<div data-role="content">
			<table data-role="table" id="tbAdicionarRow" data-mode="columntoggle" class="ui-responsive table-stroke">
				<thead>
				</thead>
				<tbody>
					<tr>
						<td>Data:</td>
						<td><input type="date" data-clear-btn="true" id="dataOper" value=""></td>
					</tr>
					<tr>
						<td>Preço:</td>
						<td><input type="number" class="decimal" step="0.01" data-clear-btn="true" id="precoOperAtivo" value=""></td>
					</tr>
					<tr>
						<td>Quantidade:</td>
						<td><input type="number" data-clear-btn="true" id="qtdOper" value=""></td>
					</tr>
					<tr>
						<td align="right" colspan="2">
							<fieldset data-role="controlgroup" data-type="horizontal">
								<input type="radio" name="tipoOper" value="C" id="tipoOperCompra" checked />
								<label for="tipoOperCompra">Compra</label>
								<input type="radio" name="tipoOper" value="V" id="tipoOperVenda" />
								<label for="tipoOperVenda">Venda</label>
							</fieldset>
						</td>
					</tr>
					<tr>
						<td>&nbsp;</td><td>&nbsp;</td>
					</tr>
					<tr>
						<td><input value="Adicionar Operação" type="button" onclick="" /></td>
						<td align="center"><input type="button" value="Cancelar" onclick="window.location=WINDOW_LOCATION+'#pgCarteira';" /> </td>
					</tr>
				</tbody>
			</table>
		</div>
	</div>
	
	<div data-role="page" id="pgBS">
		<div data-role="header" style="overflow:hidden;">
			<div data-role="navbar">
				<ul>
					<li><a href="#pgCarteira" data-transition="slidefade">COTAÇÃO</a></li>
					<li><a href="#pgBS" class="ui-btn-active ui-state-persist" data-transition="slidefade">B&S</a></li>
					<li><a href="#pgSimulacao"  data-transition="slidefade">SIMULAÇÃO</a></li>
				</ul>
			</div>
		</div>
		<div data-role="content">
			<div id="camposPreenchimentoBS" >
				<table>
					<thead></thead>
					<tbody>
						<tr>
							<td>Preço Ação:</td>
							<td><input id="paBS" value="20.00" type="number" class="decimal" step="0.01" /></td>
						</tr>
						<tr>
							<td>Preço Exer. Opção:</td>
							<td><input id="peBS" value="21.00" type="number" class="decimal" step="0.01" /></td>
						</tr>
						<tr>
							<td>Qtd Dias Venc.:</td>
							<td><input id="qtdDiasVencBS" value="30" type="number" /></td>
						</tr>
						<tr>
							<td>Preço Opção:</td>
							<td><input id="poBS" value="" type="number" class="decimal" step="0.01" /></td>
						</tr>
						<tr>
							<td>Volatilidade:</td>
							<td><input id="volatBS" value="" type="number" class="decimal" step="0.01" /></td>
						</tr>
						<tr>
							<td>Taxa de Juros:</td>
							<td><input id="txjurosBS" value="11.75" type="number" class="decimal" step="0.01" /></td>
						</tr>
						<tr>
							<td>
								<fieldset data-role="controlgroup" data-type="horizontal">
									<input type="radio" name="tipoOpcaoBS" value="1" id="tipoOpcaoCallBS" checked />
									<label for="tipoOpcaoCallBS">Call</label>
									<input type="radio" name="tipoOpcaoBS" value="0" id="tipoOpcaoPutBS" />
									<label for="tipoOpcaoPutBS">Put</label>
								</fieldset>
							</td>
							<td>
								<input value="Calcular Preço Opção" type="button" onclick="calcularVolatPrecoOp(true);" />
							</td>
						</tr>
						<tr>
							<td colspan="2" align="center">
								<input value="Calcular Volatilidade Implícita" type="button" onclick="calcularVolatPrecoOp(false);" />
							</td>
						</tr>
					</tbody>
				</table>
			</div>
		</div>
	</div>
	
	<div data-role="page" id="pgSimulacao">
	
		<div data-role="header" style="overflow:hidden;">
			<div data-role="navbar">
				<ul>
					<li><a href="#pgCarteira" data-transition="slidefade">COTAÇÃO</a></li>
					<li><a href="#pgBS" data-transition="slidefade">B&S</a></li>
					<li><a href="#pgSimulacao" class="ui-btn-active ui-state-persist" data-transition="slidefade">SIMULAÇÃO</a></li>
				</ul>
			</div>
		</div>

		<div data-role="content">	
			<div id="camposPreenchimento" >
				<table>
					<thead></thead>
					<tbody>
						<tr>
							<td>Preço Exer. Opção:</td>
							<td><input id="pe" value="21.00" type="number" class="decimal" step="0.01" /></td>
						</tr>
						<tr>
							<td>Preço Início Ação:</td>
							<td><input id="pia" value="19.00" type="number" class="decimal" step="0.01" /></td>
						</tr>
						<tr>
							<td>Preço Final Ação:</td>
							<td><input id="pfa" value="25.00" type="number" class="decimal" step="0.01" /></td>
						</tr>
						<tr>
							<td>Intervalo da Ação:</td>
							<td><input id="interv" value="0.50" type="number" class="decimal" step="0.01" /></td>
						</tr>
						<tr>
							<td>Volatilidade:</td>
							<td><input id="volat" value="27.00" type="number" class="decimal" step="0.01" /></td>
						</tr>
						<tr>
							<td>Taxa de Juros:</td>
							<td><input id="txjuros" value="11.75" type="number" class="decimal" step="0.01" /></td>
						</tr>
						<tr>
							<td align="center">
								<fieldset data-role="controlgroup" data-type="horizontal">
									<input type="radio" name="tipoOpcao" value="1" id="tipoOpcaoCall" checked />
									<label for="tipoOpcaoCall">Call</label>
									<input type="radio" name="tipoOpcao" value="0" id="tipoOpcaoPut" />
									<label for="tipoOpcaoPut">Put</label>
								</fieldset>
							</td>
							<td><input value="Mostrar Grafico" type="button" onclick="mostrarGrafico();" /></td>
						</tr>
					</tbody>
				</table>
			</div>
			
			<div id="voltar" style="display:none">
				<input value="Voltar" type="button" onclick="ocultarContainer();" />
			</div>
			<div id="chartContainer" style="margin-left: auto; margin-right: auto; width: 300px; height: 400px" />
		</div>
	</div>
	
	</body>
</html>
